console.log("i am content_scripts");

var g_idx = 0;
window.addEventListener("scroll",function(event){
   console.log("scrolled");
   var viewportElement = document.documentElement;  
    var scrollLeft = viewportElement.scrollLeft;
 	var scrollTop = viewportElement.scrollTop;
	console.log("scroll left:"+scrollLeft+",scroll top:"+scrollTop);
	if(capture_setting.the_canvas){
		var obj = capture_setting.the_canvas;
		var pos = getElementAbsolutePos(capture_setting.the_canvas);
		console.log(" new pos is left: " + pos.x + " and top: " + pos.y +" and width:"+obj.clientWidth+" and height:"+obj.clientHeight);
	}
},false);
/*for (var i=0;i<window.frames.length;i++) {
	console.log("window.screenX :"+i+":"+window.frames[i].screenX);
	console.log("window.screenY :"+i+":"+window.frames[i].screenY);
}*/


/*var lst = window.ClientRectList();
for (var i=0;i<lst.length;i++) {
	console.log(lst[i]);
}


for (var key in window) {
	console.log("window."+key+":"+window[key]);
}*/

console.log("window.screenLeft :"+window.screenLeft);
console.log("window.screenTop :"+window.screenTop);
console.log("window.screenX :"+window.screenX);
console.log("window.screenY :"+window.screenY);

//content scroll offset
console.log("window.pageXOffset :"+window.pageXOffset);
console.log("window.pageYOffset :"+window.pageYOffset);

console.log("document.body.offsetWidth :"+document.body.offsetWidth);
console.log("document.body.offsetHeight :"+document.body.offsetHeight);
console.log("window height:"+$(window).height());
console.log("window inner height:"+window.innerHeight);
console.log("window outer height:"+window.outerHeight);


console.log("document height:"+$(document).height());
console.log("screen height:"+window.screen.height);

chrome.extension.onMessage.addListener(function(request,sender,sendResponse) {
	if(request.cmd == "refresh_progress"){
		//$(document.body).append("<div>"+"frames:"+request.prog+"</div>");
		$("#progress").remove();
		if(request.prog == -1)
			$(document.body).append("<div id=progress>"+"finished!"+"</div>");
		else
			$(document.body).append("<div id=progress>"+"frame:"+request.prog+"</div>");

	}
});

var capture_setting ={};

capture_setting.is_recording = false;
capture_setting.the_canvas = null;

var is_recording = false;

$("canvas").addClass("floatbar");

/*<img id="record_button" src="record.png"/>*/

$("canvas").mouseover(function(){
	console.log("over me");
});


function on_hover(e){
	console.log("hover me");

	chrome.extension.sendMessage({"cmd":"status"},function(response){
						is_recording = response;
						if(is_recording)
								$(".record_button").each(function(){
															this.innerHTML = "stop";
														 });
						else
								$(".record_button").each(function(){
															this.innerHTML = "record";
														 });
					});

	if(this.getBoundingClientRect)
	{
		capture_setting.the_canvas = this;
		var box = this.getBoundingClientRect();

		$(".toolbar_div").hide();


		
		if(this.idx == null){
			var scrollLeft = window.pageXOffset || document.body.scrollLeft || document.documentElement.scrollLeft;
			var scrollTop = window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop;

			var abs_x = box.right+scrollLeft;
			var abs_y = box.top+scrollTop;
			var str = '<div class="toolbar_div" id="toolbar'+g_idx+'" style="position:absolute;left:'+abs_x+'px;top:'+abs_y+'px;"><a id="record_button'+g_idx+'" class="record_button" href="javascript:void(0)">record</a></div>';
			$(document.body).append(str);
			//$(document.body).append('<div id="progress" style="position:absolute;left:'+box.right+'px;top:'+(box.top+20)+'px;">frames:</div>');
			this.idx = g_idx;

			
			var button = $("#record_button"+g_idx)[0];
			button.capture_object = this;
			button.idx = g_idx;

		

			$(".record_button").bind("click",function(){
			
				console.log("clicked");

				
				if(!is_recording)
				{
					console.log("clicked");
					this.innerHTML="stop";
					
					console.log("this"+capture_setting.the_canvas);

					//var pos = getElementAbsolutePos(capture_setting.the_canvas);
					var pos = getElementAbsolutePos(this.capture_object);
					var msg={"cmd":"capture","url":window.location.href, "rect":[pos.x,pos.y,capture_setting.the_canvas.clientWidth,capture_setting.the_canvas.clientHeight]};
					
					chrome.extension.sendMessage(msg,function(){
						console.log("callback again");
					});
					console.log(msg);
					console.log("finished");
				}else{
					this.innerHTML="record";
					 chrome.extension.sendMessage({"cmd":"stop_capture"});
				}

				$("#toolbar"+this.idx).hide();
						
			});

			g_idx++;
		}

		/*var button = $("#record_button"+this.idx)[0];
		if(is_recording)
				button.innerHTML = "stop";
		else
				button.innerHTML = "record";*/

		var id = this.toolbar;
		$("#toolbar"+this.idx).show();
		
	}
}


function on_leave(e)
{
	if(this.toolbar)
	{
		var id = this.toolbar;
		$("#"+id).hide();
	}
}

//$("div").bind("hover",on_hover);
$("canvas").bind("hover",on_hover);
$("video").bind("hover",on_hover);
$("object").bind("hover",on_hover);
$("svg").bind("hover",on_hover);

$("#player").bind("hover",on_hover);
$("#watch-player").bind("hover",on_hover);

$(".video").bind("hover",on_hover);
$(".player-wrap").bind("hover",on_hover);

/*$("canvas").bind("mouseleave",on_leave);
$("video").bind("mouseleave",on_leave);
$("#player").bind("mouseleave",on_leave);*/



$("canvas").mouseleave(function(){
	console.log("leave me");
	//$("#toolbar").hide();
});




/*$("#record_button").click(function(){
	console.log("clicked");
	if(!capture_setting.is_recording)
	{
		console.log("clicked");
		this.innerHTML="stop";
		$("#toolbar").hide();
		console.log("this"+the_canvas);
		var pos = getElementAbsolutePos(the_canvas);
		var msg={"cmd":"capture","url":window.location.href, "rect":[pos.x,pos.y,the_canvas.clientWidth,the_canvas.clientHeight]};
		is_recording = true;
		chrome.extension.sendMessage(msg,function(){
			console.log("callback again");
			is_recording = true;
		});
		console.log(msg);
		console.log("finished");
	}else{
		this.innerHTML="record";
		$("#toolbar").hide();
		 chrome.extension.sendMessage({"cmd":"stop_capture"});
		 is_recording = false;
	}
});*/


/*function clickHandler(e){
	console.log("clicked");
}

//can not access  chrome.* APIs (except for parts of chrome.extension)

   function stopCapture(){	
	   console.log("capture stopped");
	}
   
   $(function(){
   $("#tstid").click(function(){
	      console.log("capture stopped");
   });
   });


document.addEventListener("mousedown",function(event){
			
			  if(event.button == 2){//right click
			
				  //if the element is canvas, add context menu
				  var obj;
				  if(event.srcElement){
				    obj = event.srcElement;
  				  }else if(event.target){
					 obj = event.target;
				  }

				  if(obj && (obj.nodeName == "CANVAS" || obj.nodeName=="canvas"))
				  {
					  console.log("hit");
					  var pos = getElementAbsolutePos(obj);

				
				
					
					 //pos.x += window.screenX + window.pageXOffset ;
					 //pos.y += window.screenY + window.pageYOffset ;

					 // pos.x -= window.pageXOffset;
					 // pos.y -= window.pageYOffset;

					  console.log("left: " + pos.x + " and top: " + pos.y +" and width:"+obj.clientWidth+" and height:"+obj.clientHeight);
					  chrome.extension.sendMessage({"cmd":"capture","url":window.location.href, "rect":[pos.x,pos.y,obj.clientWidth,obj.clientHeight]},function(){
						  console.log("capture callback");

						  var script =  document.createElement( 'script' );
						  script.type = 'text/javascript';
						  script.text = "function stopCapture(){ }"
						  document.body.appendChild(script);
						 
						  $(document.body).append('<a href="javascript:void(0)" id="tstid">stop vido-lize</a><div>');

						  $("#tstid").bind("click",function(event){
							  console.log("stop capture");
							  chrome.extension.sendMessage({"cmd":"stop_capture"});
						  });
					  });
				  }
				
			  }
		  },true);

*/

//useful link:
//http://acko.net/blog/mouse-handling-and-absolute-positions-in-javascript/



		